<template>
  <div class="alist">
    <img src="" alt="" />
    <div class="nav">
      <div class="sousuo">
        <el-input v-model="input" placeholder="请输入医院名称" />
      </div>
      <div class="search" @click="onSearch">
        <span class="iconfont icon-sousuo">&emsp;搜索</span>
      </div>
      <div class="reset" @click="reset">
        <span class="iconfont icon-zhongzhi">&emsp;重置</span>
      </div>
    </div>

    <div class="table">
      <el-table :data="tableData" border style="width: 100%">
        <el-table-column prop="name" label="预约人" />
        <el-table-column prop="hospitalName" label="预约医院" />
        <el-table-column prop="petName" label="宠物名称" />
        <el-table-column prop="petType" label="品种" />
        <el-table-column prop="time" label="上门时间" />
        <el-table-column label="操作">
              <template #default="scope">
          <el-button type="text" @click="dialogFormVisible = true">
              <img
                src="../../assets/img/5.png"
                alt=""
                @click="handleEdit(scope.$index, scope.row)"
              /> 
            </el-button>
              </template>
                
              
        </el-table-column>
      </el-table>

      <el-dialog v-model="dialogFormVisible" title="预约号">
        <el-form :model="form">
          <el-form-item label="预约人" :label-width="formLabelWidth">
            <el-input v-model="form.name" autocomplete="off"></el-input>
          </el-form-item>
        </el-form>
        <el-form :model="form">
          <el-form-item label="预约医院" :label-width="formLabelWidth">
            <el-input v-model="form.hospitalName" autocomplete="off"></el-input>
          </el-form-item>
        </el-form>
        <el-form :model="form">
          <el-form-item label="宠物名称" :label-width="formLabelWidth">
            <el-input v-model="form.petName" autocomplete="off"></el-input>
          </el-form-item>
        </el-form>
        <el-form :model="form">
          <el-form-item label="品种" :label-width="formLabelWidth">
            <el-input v-model="form.variety" autocomplete="off"></el-input>
          </el-form-item>
        </el-form>
        <el-form :model="form">
          <el-form-item label="上门时间" :label-width="formLabelWidth">
            <el-input v-model="form.theDoorOfTime" autocomplete="off"></el-input>
          </el-form-item>
        </el-form>
        <template #footer>
          <span class="dialog-footer">
            <el-button @click="dialogFormVisible = false">Cancel</el-button>
            <el-button type="primary" @click="Confirm"
              >Confirm</el-button
            >
          </span>
        </template>
      </el-dialog>
      <el-pagination
        v-model:currentPage="currentPage1"
        :page-sizes="[9]"
        :page-size="9"
        layout="total, sizes, prev, pager, next, jumper"
        :total="45"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
      >
      </el-pagination>
    </div>
  </div>
</template>

<script lang="ts">
import { mockService } from "../../api/mock";
import { defineComponent, ref, onMounted, reactive, toRefs } from "vue";
export default defineComponent({
  setup() {
    const state = reactive({
      gridData: [
        {
          date: "2016-05-02",
          name: "John Smith",
          address: "No.1518,  Jinshajiang Road, Putuo District",
        },
        {
          date: "2016-05-04",
          name: "John Smith",
          address: "No.1518,  Jinshajiang Road, Putuo District",
        },
        {
          date: "2016-05-01",
          name: "John Smith",
          address: "No.1518,  Jinshajiang Road, Putuo District",
        },
        {
          date: "2016-05-03",
          name: "John Smith",
          address: "No.1518,  Jinshajiang Road, Putuo District",
        },
      ],
      dialogTableVisible: false,
      dialogFormVisible: false,
      
      form: {
        name: "",
        region: "",
        date1: "",
        date2: "",
        delivery: false,
        type: [],
        resource: "",
        desc: "",
      hospitalName:'',
      petName:'',
      variety:'',
      theDoorOfTime:"",
      },
      formLabelWidth: "120px",
    });
    const handleSizeChange = (val: any) => {
      console.log(`${val} items per page`);
    };
    const Confirm = ()=>{
      state.dialogFormVisible = true
        //   state.form.name =  row.name
        // state.form.hospitalName =  row.hospitalName
        // state.form.petName =  row.petName
        // state.form.variety =  row.petType
        // state.form.theDoorOfTime =  row.time
    }
    const handleEdit = (index: any, row: any) => {
        console.log(index, row);
        state.form.name =  row.name
        state.form.hospitalName =  row.hospitalName
        state.form.petName =  row.petName
        state.form.variety =  row.petType
        state.form.theDoorOfTime =  row.time
    //  state.dialogTableVisible = true;  
    };
    const input = ref("");
    const onClick = () => {
      alert(1);
    };
    let value: any = 1;
    const onSearch = async () => {
      // if (input.value) {
      const res = await mockService.getServerList(value, 9, input.value);
      tableData.value = res.result;
      // }
    };
    const reset = async () => {
      const res = await mockService.getServerList(value, 9);
      tableData.value = res.result;
    };
    // let page: any = ref(1)
    const handleCurrentChange = async (val: any) => {
      const res = await mockService.getServerList(val, 9);
      tableData.value = res.result;
      // console.log(tableData);
    };
    let tableData = ref([]);
    const cellClick = (a: any) => {
      console.log(a);
    };
    onMounted(async () => {
      // console.log(page);
      const res = await mockService.getServerList(1, 9);
      tableData.value = res.result;
      // console.log(tableData);
    });

    return {
      ...toRefs(state),
      currentPage1: ref(1),
      currentPage2: ref(5),
      currentPage3: ref(5),
      currentPage4: ref(4),
      handleSizeChange,
      handleCurrentChange,
      tableData,
      input,
      onSearch,
      reset,
      onClick,
      cellClick,
      handleEdit,
      Confirm
    };
  },
});
</script>

<style lang="less" scoped>
.alist {
  margin: 15px 20px 15px 18px;
}
.nav {
  display: flex;
}
.sousuo {
  width: 212px;
  height: 40px;
  background: #ffffff;
  border: 1px solid #e9ecf7;
  border-radius: 4px;
  margin: 10px 13px 0px 10px;
}
.search {
  width: 90px;
  height: 37px;
  background: #ecf5ff;
  border: 1px solid #409eff;
  border-radius: 4px;
  margin: 11px 23px 0px 0px;
}
.reset {
  width: 90px;
  height: 37px;
  background: #f0f9eb;
  border: 1px solid #94cd79;
  border-radius: 4px;
  margin-top: 11px;
}
.icon-sousuo {
  display: inline-block;
  font-size: 14px;
  font-weight: 600;
  margin: 11px 6px 12px 21px;
}
.icon-zhongzhi {
  display: inline-block;
  font-size: 14px;
  font-weight: 600;
  margin: 12px 9px 12px 15px;
}
.table {
  margin-left: 10px;
  margin-top: 15px;
}
/deep/.has-gutter {
  font-size: 20px;
  text-align: center;
  color: black;
}
</style>
